<template>

    <el-dialog v-model="centerDialogVisible" :show-close="false" class="Rankdialog" width="870px" align-center>
        <div class="closerank" @click="close">
            <strong></strong>
            <h3>{{ $t("language.rank.name") }}</h3>
            <span>
                <el-icon color="#b5b6c8" size="16">
                    <Close />
                </el-icon>
            </span>
        </div>
        <div class="rank">
            <Skeleton :loading="loadings">
                <template #ske>
                    <div style="
                width: 100%;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
              ">
                        <el-skeleton-item variant="text" style="width: 100%; height: 100px" />
                        <el-skeleton-item variant="text" style="width: 100%; height: 50px; margin-top: 10px" />
                        <el-skeleton-item variant="h3" style="width: 30%; height: 30px; margin-top: 10px" />
                        <div style="width: 100%">
                            <el-skeleton-item variant="h3" style="width: 33%; height: 15px; margin: 10px 0" />
                        </div>
                    </div>
                </template>
                <template #main>
                    <table>
                        <thead>
                            <tr>
                                <th>{{ $t("language.rank.head1") }}</th>
                                <th>{{ $t("language.rank.head2") }}</th>
                                <th>{{ $t("language.rank.head3") }}</th>
                                <th>{{ $t("language.rank.head4") }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td colspan="4">{{ $t("language.rank.main") }}</td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="page">
                        <el-pagination :hide-on-single-page="value" :total="5" layout="prev, pager, next" />
                    </div>
                    <h4>{{ $t("language.rank.title") }}</h4>
                </template>
            </Skeleton>

            <dl>
                <dd v-for="(item, index) in imglist" :key="index">
                    <Skeleton :loading="loadings">
                        <template #ske>
                            <div style="width: 100%">
                                <el-skeleton-item variant="image" style="
                      width: 100%;
                      height: 180px;
                      margin: 0 0 10px;
                      border-radius: 20px;
                    " />
                                <el-skeleton-item variant="h3" style="width: 100%; height: 15px" />
                            </div>
                        </template>
                        <template #main>
                            <NuxtImg class="low" src="/img/ha1.png" alt="" />
                            <NuxtImg class="big" :src="item" alt="" />
                            <span>Emoji Riches-Hash rt</span>
                        </template>
                    </Skeleton>
                </dd>
            </dl>
            <span class="btn">{{ $t("language.rank.btn") }}</span>
        </div>
    </el-dialog>


</template>

<script setup lang="ts">
import { ref,shallowRef, watch, nextTick, reactive } from "vue";
import { Close } from '@element-plus/icons-vue'
let loadings = shallowRef<boolean>(true);

const centerDialogVisible = ref<boolean>(false);
let iscomponent = shallowRef<string>("login");
const value = shallowRef<boolean>(false);
let close = () => {
    centerDialogVisible.value = false;
    iscomponent.value = "login";
};
let open = () => {
    centerDialogVisible.value = true;
};
watch(centerDialogVisible, (newval) => {
    if (newval) {
        nextTick(() => {
            loadings.value = false;
            // let time = setInterval(() => {
            //     loadings.value = false;
            //     clearInterval(time);
            // }, 500);
        });
    }
});

let imglist = reactive<string[]>([
    "/img/ra1.png",
    "/img/ra2.jpg",
    "/img/ra3.png",
    "/img/ra4.jpg",
    "/img/ra5.jpg",
    "/img/ra6.jpg",
    "/img/ra7.jpg",
    "/img/ra8.png",
    "/img/ra9.jpg",
    "/img/ra10.jpg",
    "/img/ra11.jpg",
    "/img/ra12.png",
]);
defineExpose({
    open,
});
</script>

<style lang="scss">
.Rankdialog {

    padding: 10px !important;
    background-color: #32353e !important;
    --el-dialog-bg-color: #32353e !important;
    border-radius: 10px;

    &::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

    .el-pager li {
        background-color: rgb(26, 26, 26) !important;
        color: #0a906c !important;
    }

    .el-pagination button {
        background: rgb(26, 26, 26) !important;
    }

    .el-dialog__header {
        padding: 0 0 0 !important;
    }

    .closerank {
        width: 100%;
        @include flex(row, space-between, center);
        border-bottom: 1px solid #4a4c53;
        padding-bottom: 15px;

        strong {
            width: 30px;
            display: block;
        }

        h3 {
            font-size: 18px;
            color: #b5b6c8;
            text-align: center;
            flex: 1;
        }

        span {
            display: block;
            width: 28px;
            height: 28px;
            @include flex(row, center, center);
            border: 2px solid #b5b6c8;
            border-radius: 16px;
        }
    }

    .btn {
        width: 200px;
        height: 32px;
        display: block;
        line-height: 32px;
        margin: 20px auto 40px;
        border-radius: 3px;

        text-align: center;
        font-size: 14px;
        cursor: pointer;
        color: #878d9f;
        background: #0c8560;
        color: #fff;
        border-radius: 5px;
    }

    .rank {
        padding: 0 10px;
        width: 100%;

        .page {
            @include flex(row, center, center);
            margin-top: 15px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
            padding: 0;
            border: 1px solid #3d4148;

            th {
                text-align: center;
                font-size: 14px;
                color: #b5bac8;
                height: 100%;
                padding: 8px;
                line-height: 24px;
                font-weight: bold;
                background-color: rgb(61, 65, 72);
                border: 1px solid #4b4e55;
            }

            td {
                text-align: center;
                font-size: 14px;
                color: #b5bac8;
                padding: 20px 8px;
            }

            tbody {
                background-color: rgb(36, 38, 43);
            }
        }

        h4 {
            color: #b5b6c8;
            font-size: 16px;
            margin: 20px 0;
        }

        dl {
            height: 480px;
            overflow-y: auto;
            width: 100%;

            &::-webkit-scrollbar {
                width: 0;
                height: 0;
                display: none;
            }

            @include flex(row, space-between, flex-end);
            flex-wrap: wrap;

            dd {
                position: relative;
                @include flex(column, flex-end, flex-start);
                width: 29%;
                margin-bottom: 30px;

                .low {
                    position: absolute;
                    right: 0;
                    top: 0;
                    width: 40px;
                }

                .big {
                    width: 100%;
                    border-radius: 20px;
                }

                span {
                    display: block;
                    width: 100%;
                    font-size: 14px;
                    color: #b5b6c8;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }
    }
}
</style>